<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    listData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        legend: [{
          show: false,
          formatter: function(name) {
            return echarts.format.truncateText(name, 80, '14px Microsoft Yahei', '…')
          },
          tooltip: {
            show: true
          },
          selectedMode: 'false',
          bottom: 20,
          data: ['医保公告1', '医保公告2', '医保公告3', '医保公告4']
        }],
        toolbox: {
          show: false,
          feature: {
            dataView: {
              show: true,
              readOnly: true
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        animationDuration: 3000,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          name: '专利',
          type: 'graph',
          layout: 'force',

          force: {
            repulsion: 400,
            gravity: 0.1
          },
          data: [{
            'name': 'CN201110436259.7',
            // "x": 0,
            // y: 0,
            'symbolSize': 40,
            'draggable': 'true',
            'value': 27

          }, {
            'name': '医保公告1',
            'value': 15,
            'symbolSize': 20,
            'category': '医保公告1',
            'draggable': 'true'
          }, {
            'name': '民生福祉',
            'symbolSize': 45,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '竞争',
            'symbolSize': 15,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '健康',
            'symbolSize': 30,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '合作',
            'symbolSize': 10,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '和谐',
            'symbolSize': 15,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '金额',
            'symbolSize': 15,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '太平',
            'symbolSize': 15,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '帮助',
            'symbolSize': 15,
            'category': '医保公告1',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '医保公告2',
            'value': 60,
            'symbolSize': 20,
            'category': '医保公告2',
            'draggable': 'true'
          }, {
            'name': '王保均',
            'symbolSize': 45,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '病人',
            'symbolSize': 20,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '唐寿雄',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '宋建峰',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '刘伟',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '王元泽',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '翁斌',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '杨声斌',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '王天均',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '余凤兵',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '高晶',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '金英姬',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '刘坤明',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '陶小丽',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '郑凌霄',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '谢德',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '郭国文',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '刘改',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '王志燊',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '尹向阳',
            'symbolSize': 15,
            'category': '医保公告2',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '医保公告3',
            'value': 5,
            'symbolSize': 15,
            'category': '医保公告3',
            'draggable': 'true'
          }, {
            'name': '医生',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '病患',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '手术',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '丙类',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '断时',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '工作频率',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '点滴',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '截面积',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '局部长度',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '医保',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '局部组成',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '路线',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '药物',
            'symbolSize': 10,
            'category': '医保公告3',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '医保公告4',
            'value': 15,
            'symbolSize': 20,
            'category': '医保公告4',
            'draggable': 'true'
          }, {
            'name': '赔付',
            'symbolSize': 30,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '上位概念',
            'symbolSize': 15,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '下位概念',
            'symbolSize': 15,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '邻近概念',
            'symbolSize': 15,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '临床',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '保险',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '糖浆',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '电抗器',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '医院',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '乙类',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '医疗',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '开关设备',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '塔架',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '金具',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '稳步',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '甲类',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }, {
            'name': '三甲',
            'symbolSize': 10,
            'category': '医保公告4',
            'draggable': 'true',
            'value': 1
          }],
          links: [{
            'source': 'CN201110436259.7',
            'target': '医保公告1'
          }, {
            'source': '医保公告1',
            'target': '民生福祉'
          }, {
            'source': '民生福祉',
            'target': '竞争'
          }, {
            'source': '竞争',
            'target': '健康'
          }, {
            'source': '民生福祉',
            'target': '合作'
          }, {
            'source': '合作',
            'target': '帮助'
          }, {
            'source': '合作',
            'target': '太平'
          }, {
            'source': '合作',
            'target': '金额'
          }, {
            'source': '合作',
            'target': '和谐'
          }, {
            'source': 'CN201110436259.7',
            'target': '医保公告2'
          }, {
            'source': '医保公告2',
            'target': '王保均'
          }, {
            'source': '王保均',
            'target': '病人'
          }, {
            'source': '病人',
            'target': '唐寿雄'
          }, {
            'source': '病人',
            'target': '宋建峰'
          }, {
            'source': '病人',
            'target': '刘伟'
          }, {
            'source': '病人',
            'target': '王元泽'
          }, {
            'source': '病人',
            'target': '翁斌'
          }, {
            'source': '病人',
            'target': '杨声斌'
          }, {
            'source': '病人',
            'target': '王天均'
          }, {
            'source': '病人',
            'target': '余凤兵'
          }, {
            'source': '病人',
            'target': '高晶'
          }, {
            'source': '病人',
            'target': '金英姬'
          }, {
            'source': '病人',
            'target': '刘坤明'
          }, {
            'source': '病人',
            'target': '陶小丽'
          }, {
            'source': '病人',
            'target': '郑凌霄'
          }, {
            'source': '病人',
            'target': '郭国文'
          }, {
            'source': '病人',
            'target': '谢德'
          }, {
            'source': '病人',
            'target': '刘改'
          }, {
            'source': '病人',
            'target': '王志燊'
          }, {
            'source': '病人',
            'target': '尹向阳'
          }, {
            'source': 'CN201110436259.7',
            'target': '医保公告3'
          }, {
            'source': '医保公告3',
            'target': '医生'
          }, {
            'source': '医保公告3',
            'target': '药物'
          }, {
            'source': '医保公告3',
            'target': '路线'
          }, {
            'source': '医保公告3',
            'target': '局部组成'
          }, {
            'source': '医保公告3',
            'target': '医保'
          }, {
            'source': '医保公告3',
            'target': '局部长度'
          }, {
            'source': '医保公告3',
            'target': '截面积'
          }, {
            'source': '医保公告3',
            'target': '点滴'
          }, {
            'source': '医保公告3',
            'target': '工作频率'
          }, {
            'source': '医保公告3',
            'target': '断时'
          }, {
            'source': '医保公告3',
            'target': '丙类'
          }, {
            'source': '医保公告3',
            'target': '手术'
          }, {
            'source': '医保公告3',
            'target': '病患'
          }, {
            'source': 'CN201110436259.7',
            'target': '医保公告4'
          }, {
            'source': '医保公告4',
            'target': '赔付'
          }, {
            'source': '赔付',
            'target': '上位概念'
          }, {
            'source': '赔付',
            'target': '下位概念'
          }, {
            'source': '赔付',
            'target': '邻近概念'
          }, {
            'source': '上位概念',
            'target': '三甲'
          }, {
            'source': '邻近概念',
            'target': '甲类'
          }, {
            'source': '邻近概念',
            'target': '电抗器'
          }, {
            'source': '邻近概念',
            'target': '医院'
          }, {
            'source': '邻近概念',
            'target': '乙类'
          }, {
            'source': '邻近概念',
            'target': '医疗'
          }, {
            'source': '邻近概念',
            'target': '开关设备'
          }, {
            'source': '邻近概念',
            'target': '塔架'
          }, {
            'source': '邻近概念',
            'target': '金具'
          }, {
            'source': '邻近概念',
            'target': '稳步'
          }, {
            'source': '下位概念',
            'target': '糖浆'
          }, {
            'source': '下位概念',
            'target': '保险'
          }, {
            'source': '下位概念',
            'target': '临床'
          }],
          categories: [{
            'name': '医保公告1'
          }, {
            'name': '医保公告2'
          }, {
            'name': '医保公告3'
          }, {
            'name': '医保公告4'
          }],
          focusNodeAdjacency: true,
          roam: true,
          label: {
            normal: {

              show: true,
              position: 'top'

            }
          },
          lineStyle: {
            normal: {
              color: 'source',
              curveness: 0,
              type: 'solid'
            }
          }
        }]
      })
      window.resize = () => {
        this.chart.resize()
      }
    }
  }
}
</script>
